<template>
  <div class="file-manager">
    <el-container>
      <el-aside width="250px" class="file-tree">
        <div class="tree-header">文件目录</div>
        <el-tree
          ref="treeRef"
          :data="treeData"
          :props="defaultProps"
          @node-click="handleNodeClick"
          :load="loadNode"
          lazy
          :expand-on-click-node="false"
        >
          <template #default="{ node, data }">
            <span class="custom-tree-node">
              <el-icon><Folder v-if="!node.expanded" /><FolderOpened v-else /></el-icon>
              <span>{{ node.label }}</span>
            </span>
          </template>
        </el-tree>
      </el-aside>
      <el-main class="file-content">
        <el-empty v-if="!currentPath" description="请选择一个文件夹" />
        <div v-else>
          <div class="path-nav">
            当前路径: {{ currentPath }}
          </div>
          <el-table :data="fileList" style="width: 100%" height="calc(100vh - 200px)">
            <el-table-column prop="name" label="名称" min-width="200">
              <template #default="{ row }">
                <el-icon class="mr-1"><Folder v-if="row.type === '文件夹'" /><Document v-else /></el-icon>
                <span>{{ row.name }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="type" label="类型" width="100" />
            <el-table-column prop="size" label="大小" width="100" />
            <el-table-column prop="modifiedTime" label="修改时间" width="180" />
          </el-table>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { Folder, FolderOpened, Document } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'

const treeData = ref([
  {
    label: 'C:',
    path: 'C:\\',
  },
  {
    label: 'D:',
    path: 'D:\\',
  }
])

const currentPath = ref('')
const fileList = ref([])

const defaultProps = {
  children: 'children',
  label: 'label',
  isLeaf: 'isLeaf'
}

const handleError = (error) => {
  if (error === 'ACCESS_DENIED') {
    ElMessage.error('没有访问权限')
  } else if (error === 'ENOENT') {
    ElMessage.error('目录不存在')
  } else {
    ElMessage.error('操作失败')
  }
}

const handleNodeClick = async (data) => {
  try {
    currentPath.value = data.path
    const result = await window.electron.getFiles(data.path)
    if (result.error) {
      handleError(result.error)
      fileList.value = []
    } else {
      fileList.value = result.data
    }
  } catch (error) {
    ElMessage.error('获取文件列表失败')
    console.error(error)
    fileList.value = []
  }
}

const loadNode = async (node, resolve) => {
  if (node.level === 0) {
    return resolve(treeData.value)
  }
  
  try {
    const path = node.data.path
    const result = await window.electron.getDirectories(path)
    if (result.error) {
      handleError(result.error)
      resolve([])
    } else {
      const children = result.data.map(dir => ({
        label: dir.name,
        path: dir.path
      }))
      resolve(children)
    }
  } catch (error) {
    ElMessage.error('获取目录失败')
    console.error(error)
    resolve([])
  }
}
</script>

<style scoped>
.file-manager {
  height: 100%;
}

.el-container {
  height: 100%;
  background-color: white;
  border-radius: 4px;
}

.file-tree {
  background-color: white;
  border-right: 1px solid #dcdfe6;
  display: flex;
  flex-direction: column;
  padding: 0;
}

.tree-header {
  padding: 15px;
  font-weight: bold;
  border-bottom: 1px solid #dcdfe6;
  background-color: #f5f7fa;
}

.el-tree {
  flex: 1;
  padding: 10px;
}

.custom-tree-node {
  display: flex;
  align-items: center;
  gap: 4px;
}

.file-content {
  padding: 20px;
  background-color: white;
}

.path-nav {
  margin-bottom: 20px;
  padding: 10px;
  background-color: #f5f7fa;
  border-radius: 4px;
  border: 1px solid #dcdfe6;
}

.mr-1 {
  margin-right: 4px;
}

:deep(.el-table) {
  border: 1px solid #dcdfe6;
}

:deep(.el-table .cell) {
  display: flex;
  align-items: center;
}

:deep(.el-table__header) {
  background-color: #f5f7fa;
}
</style> 